<script setup>
import headerBar from '@/components/header/index.vue'
import footerBar from '@/components/footer/index.vue'
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
import { bannerlist } from '@/api/index';
import { informationdetail, informationup, informationcollect, informationcomment, informationshare, informationhotlist } from '@/api/info';
const checkList = ref([]);
const swiperList = ref([]);
const detailInfo = ref('');
const getinformationhotlistList = ref([]);
// 筛选资讯文章列表
const getinformationhotlist = () => {
    let params = {
        "data": {
            "pagesize": 10000,
            "pagestart": 0
        }
    }
    informationhotlist(params).then(res => {
        console.log(res);
        getinformationhotlistList.value = res.data.informationlist;
    })
}
getinformationhotlist();
// 轮播图
const getbannerlist = () => {
    let params = {
        "data": {
            "bannertype": 21
        }
    }
    bannerlist(params).then(res => {
        swiperList.value = res.data.bannerlist;
    })
}
getbannerlist();
const getinformationdetail = () => {
    let params = {
        "data": {
            "informationid": Number(route.query.id)
        }
    }
    informationdetail(params).then(res => {
        detailInfo.value = res.data;
    })
}
getinformationdetail();
//点赞
const isup = ref(true);
const informationupHandler = () => {
    let params = {
        "data": {
            "informationid": Number(route.query.id),
            "isup": isup.value ? 1 : 0
        }
    }
    informationup(params).then(res => {
        console.log(res)
        isup.value = !isup.value;
        if (res.code === 0) {
            ElMessage({
                showClose: true,
                message: '操作成功！',
                type: 'success',
            })
        } else {
            ElMessage({
                showClose: true,
                message: res.message,
                type: 'warning',
            })
        }

    }).catch(err => {
        console.log(err);
    })
}
//收藏
const iscollect = ref(true);
const informationcollectHandler = () => {
    let params = {
        "data": {
            "informationid": Number(route.query.id),
            "iscollect": iscollect.value ? 1 : 0
        }
    }
    informationcollect(params).then(res => {
        console.log(res)
        iscollect.value = !iscollect.value;
        if (res.code === 0) {
            ElMessage({
                showClose: true,
                message: '操作成功！',
                type: 'success',
            })
        } else {
            ElMessage({
                showClose: true,
                message: res.message,
                type: 'warning',
            })
        }

    }).catch(err => {
        console.log(err);
    })
}
//评论
const informationcommentShow = () => {
    dialogVisible.value = true;
    comment.value = '';
}
const comment = ref('');
const dialogVisible = ref(false);
const informationcommentHandler = () => {
    let params = {
        "data": {
            "informationid": Number(route.query.id),
            "comment": comment.value
        }
    }
    informationcomment(params).then(res => {
        console.log(res)
        if (res.code === 0) {
            ElMessage({
                showClose: true,
                message: '操作成功！',
                type: 'success',
            })
            dialogVisible.value = false;
        } else {
            ElMessage({
                showClose: true,
                message: res.message,
                type: 'warning',
            })
        }

    }).catch(err => {
        console.log(err);
    })
}
const informationshareHandler = () => {
    let params = {
        "data": {
            "informationid": Number(route.query.id),
            "sharetype": 0
        }
    }
    informationshare(params).then(res => {
        console.log(res)
        if (res.code === 0) {
            ElMessage({
                showClose: true,
                message: '操作成功！',
                type: 'success',
            })
        } else {
            ElMessage({
                showClose: true,
                message: res.message,
                type: 'warning',
            })
        }

    }).catch(err => {
        console.log(err);
    })
}
</script>
<template>
    <div class="container">
        <header-bar :index="1"></header-bar>
        <div class="swiper">
            <el-carousel height="688px">
                <el-carousel-item v-for="(item, index) in swiperList" :key="index">
                    <a :href="item.bannerhref" target="_blank" class="carousel">
                        <img :src="item.bannerurl" alt="">
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="module-container">
            <div class="article-module">
                <div class="article-title">{{ detailInfo.informationname }}</div>
                <div class="article-info">
                    <div class="article-source">来源：{{ detailInfo.informationsource }}</div>
                    <div class="article-time">时间：{{ detailInfo.publishtime }}</div>
                    <div class="article-hot">热度：{{ detailInfo.informationhot }}</div>
                </div>
                <div class="article-abstract">
                    <h6>摘要：</h6>
                    <div class="article-abstract-content">{{ detailInfo.informationabstract }}</div>
                </div>
                <div class="article-content">
                    <div class="article-text-title">正文：</div>
                    <div class="article-text" v-html="detailInfo.informationtext"></div>
                </div>
                <div class="article-tool">
                    <div class="article-tool-item" @click="informationupHandler">
                        <i></i>
                        <span>点赞（{{ detailInfo.informationup }}）</span>
                    </div>
                    <div class="article-tool-item" @click="informationcommentShow">
                        <i></i>
                        <span>评论（{{ detailInfo.informationread }}）</span>
                    </div>
                    <div class="article-tool-item" @click="informationshareHandler">
                        <i></i>
                        <span>分享（{{ detailInfo.informationstudy }}）</span>
                    </div>
                    <div class="article-tool-item" @click="informationcollectHandler">
                        <i></i>
                        <span>收藏（{{ detailInfo.informationcollect }}）</span>
                    </div>
                    <div class="article-tool-item">
                        <i></i>
                        <span>社区互动</span>
                    </div>
                    <div class="article-tool-item">
                        <i></i>
                        <span>圈选操作</span>
                    </div>
                </div>
            </div>
            <div class="list-module">
                <div class="module-two-right-hot">
                    <div class="module-two-right-hot-title">相关文章</div>
                    <div class="module-two-right-hot-list">
                        <div class="module-two-right-hot-item" @click="jumpDetail(item)"
                            v-for="(item, index) in getinformationhotlistList" :key="index">
                            {{ index + 1 + '、' + item.informationname }}
                        </div>
                    </div>
                </div>
                <div class="module-two-right-hot">
                    <div class="module-two-right-hot-title">热度榜</div>
                    <div class="module-two-right-hot-list">
                        <div class="module-two-right-hot-item" @click="jumpDetail(item)"
                            v-for="(item, index) in getinformationhotlistList" :key="index">
                            {{ index + 1 + '、' + item.informationname }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer-bar></footer-bar>
    </div>

    <el-dialog v-model="dialogVisible" title="评论" width="500">
        <el-input v-model="comment" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" placeholder="请输入..." />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="informationcommentHandler">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.container {
    width: 100%;
    background-image: url(../../assets/images/info_bg.png);
    background-position: 0 0;
    background-size: cover;
    background-repeat: repeat-y;
}

.module-container {
    width: 1520px;
    margin: 0 auto;
}

.carousel {
    display: block;
    width: 100%;
    height: 100%;

    img {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.module {
    &-container {
        display: flex;
        padding-top: 80px;
    }
}

.article {
    &-module {
        width: 800px;
    }

    &-title {
        font-family: MiSansVF_Medium;
        font-size: 40px;
        color: #000000;
        line-height: 53px;
    }

    &-info {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        font-size: 24px;
        color: #999999;
    }

    &-abstract {
        font-family: MiSansVF_Medium;
        font-size: 24px;
        color: #000000;
        line-height: 40px;
        margin-top: 38px;

        h6 {
            font-family: MiSansVF_Medium;
            font-size: 24px;
            color: #000000;
            line-height: 40px;
        }

        &-content {
            margin-top: 40px;
            text-indent: 50px;
        }
    }

    &-content {
        margin-top: 28px;
    }

    &-text-title {
        margin-top: 30px;
        font-family: MiSansVF_Light;
        font-size: 24px;
        color: #000000;
        line-height: 40px;
    }

    &-text {
        margin-top: 30px;
        font-family: MiSansVF_Light;
        font-size: 24px;
        color: #000000;
        line-height: 40px;
    }

    &-tool {
        height: 170px;
        background-color: #fff;
        border-radius: 20px;
        padding: 30px 90px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        margin-bottom: 100px;
    }

    &-tool-item {
        width: 33%;
        display: flex;
        align-items: center;
        padding-left: 30px;
        cursor: pointer;

        i {
            display: block;
            width: 26px;
            height: 26px;
            margin-right: 10px;
        }

        span {
            font-family: MiSansVF_Medium;
            font-size: 20px;
            color: rgba($color: #000000, $alpha: .5);
            line-height: 27px;
        }
    }

    &-tool-item:hover {
        span {
            color: #45A1FF;
        }
    }

    &-tool-item:nth-child(1) {
        i {
            background: url('../../assets/icons/dianzan.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(1):hover {
        i {
            background: url('../../assets/icons/dianzanA.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(2) {
        i {
            background: url('../../assets/icons/pinglun.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(2):hover {
        i {
            background: url('../../assets/icons/pinglunA.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(3) {
        i {
            background: url('../../assets/icons/share.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(3):hover {
        i {
            background: url('../../assets/icons/shareA.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(4) {
        i {
            background: url('../../assets/icons/shoucang.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(4):hover {
        i {
            background: url('../../assets/icons/shoucangA.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(5) {
        i {
            background: url('../../assets/icons/shequ.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(5):hover {
        i {
            background: url('../../assets/icons/shequA.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(6) {
        i {
            background: url('../../assets/icons/quanxuan.png') no-repeat center center/100%;
        }
    }

    &-tool-item:nth-child(6):hover {
        i {
            background: url('../../assets/icons/quanxuanA.png') no-repeat center center/100%;
        }
    }
}
.module-two-right-hot {
			width: 344px;
			height: 688px;
			background: #FFFFFF;
			border-radius: 20px;
			padding: 30px 46px;
			box-sizing: border-box;
			margin-top: 48px;
            margin-left: 210px;
			&-title {
				font-family: MiSansVF_Medium;
				font-size: 24px;
				color: #000000;
				line-height: 32px;
				text-align: justify;
				padding-left: 45px;
				background: url(../../assets/icons/hot.png)no-repeat left center;
				background-size: 30px 36px;
			}

			&-list {
				height: 575px;
				margin-top: 8px;
				overflow-y: auto;
			}

			&-item {
				font-family: MiSansVF_Medium;
				font-size: 18px;
				color: #000000;
				line-height: 24px;
				text-align: justify;
				overflow: hidden;
				/* 确保超出容器的文本被裁剪 */
				white-space: nowrap;
				/* 确保文本在一行内显示 */
				text-overflow: ellipsis;
				/* 超出部分显示为省略号 */
				margin-top: 24px;
				cursor: pointer;
			}
		}
</style>
